<template>
  <view>
    <!-- 分类 -->

    <!-- 总 -->
    <view class="main">
      <!-- 左侧tab -->
      <scroll-view scroll-y="true" class="u-tab-view" :style="{height: wh + 'px'}">
        <!-- 选中状态的类名是u-tab-item-active， -->
        <view class="u-tab-item u-tab-item-active" >男装</view>
      </scroll-view>

      <!-- 右侧商品 -->
      <scroll-view scroll-y="true" class="right-goods-container " :style="{height: wh + 'px'}">
        <navigator  class="goodsList" >
          <view class="u-transition ">
            <view class="u-image">
              <!-- 图片字段是pic -->
              <image src="" mode=""></image>
            </view>
          </view>
          <view class="goods-info">
            <view class="goods-title ">
              <!-- 标题字段是name -->
              <text></text>
            </view>
            <view class="t2">
              <!-- 已售字段是 numberSells-->
              已售：
            </view>
            <view class="price-score">
              <view class="item">
                <!-- 字段是minPrice -->
                <text>￥</text>
              </view>
            </view>
            <view class="addCar">
              <view class="u-icon ">
                <uni-icons class="u-icon__icon" type="plus-filled" size="30"></uni-icons>
              </view>
            </view>
          </view>
        </navigator>
        <view class="noData">
          <text>暂无数据</text>
        </view>
      </scroll-view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        wh:0
      };
    },
    methods: {
    
    },
    onLoad() {
      const sysInfo = uni.getSystemInfoSync()
      this.wh = sysInfo.windowHeight
    }
  }
</script>

<style lang="scss">
  .main {
    flex: 1;
    overflow: hidden;
    display: flex;

    .u-tab-view {
      width: 180rpx;
      height: 100%;
      background-color: #f6f6f6;
      display: block;

      .u-tab-item {
        height: 110rpx;
        background: #f6f6f6;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #444;
        font-weight: 400;
        line-height: 1;
      }

      .u-tab-item-active {
        position: relative;
        color: #000;
        font-size: 30rpx;
        font-weight: 600;
        background: #fff;

        &::before {
          content: "";
          position: absolute;
          border-left: 4px solid #e64340;
          height: 60rpx;
          left: 0;
          top: 25rpx;
          border-left-width: 4px;
          border-left-style: solid;
          border-left-color: rgb(230, 67, 64);
        }
      }
    }

    // 右侧商品列表
    .right-goods-container {
      flex: 1;
      height: 100%;
      display: block;
      width: 100%;
      .noData{
        text-align: center;
        padding-top: 300rpx;
        color: #666;
      }
      .goodsList {
        margin-bottom: 32rpx;
        padding: 0 8rpx;
        display: flex;

        .u-transition {
          width: 136px;
          height: 136px;
          border-radius: 9px;
          overflow: visible;
          background-color: transparent;
          position: relative;
          transition: opacity 0.5s ease-in-out;
          display: flex;
          flex-direction: column;
          flex-shrink: 0;
          flex-grow: 0;
          flex-basis: auto;
          align-items: stretch;
          align-content: flex-start;

          .u-image {
            width: 136px;
            height: 136px;
            border-radius: 9px;
            overflow: visible;
            background-color: transparent;
            position: relative;
            transition: opacity 0.5s ease-in-out;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            flex-grow: 0;
            flex-basis: auto;
            align-items: stretch;
            align-content: flex-start;
            image{
                  border-radius: 9px;
                  width: 136px;
                  height: 136px;
            }
          }
        }

        .goods-info {
          flex: 1;
          margin-left: 24rpx;
          position: relative;

          .goods-title {
            color: #333;
            font-size: 28rpx;
          }

          .t2 {
            color: #666;
            font-size: 26rpx;
          }

          .price-score {
            display: flex;
            color: #e64340;
            font-size: 38rpx;

            .item {
              padding: 0 8rpx;
              display: flex;
              align-items: center;

              text {
                padding: 0 4rpx;
                font-size: 28rpx;
              }
            }
          }

          .addCar {
            position: absolute;
            right: 24rpx;
            bottom: 16rpx;

            .u-icon {
              flex-direction: row;
              align-items: center;
              display: flex;
              flex-direction: column;
              flex-shrink: 0;
              flex-grow: 0;
              flex-basis: auto;
              align-items: stretch;
              align-content: flex-start;
              font-size: 27px;
              line-height: 27px;
              font-weight: normal;
              top: 0px;
              color: #e64340;
              .uniui-plus-filled:before {
                  color: #e64340 !important;
              }

              .u-icon__icon{
                color: #e64340 !important;
                font-family: uicon-iconfont;
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: center
              }
            }
          }
        }
      }
    }

  }
</style>
